<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>微信用户绑定</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>

    <link rel="stylesheet" href="./AmazeUI-2.4.2/assets/css/amazeui.min.css"/>
    <link href="./css/dlstyle.css" rel="stylesheet" type="text/css">
    <script src="./AmazeUI-2.4.2/assets/js/jquery.min.js"></script>
    <script src="./AmazeUI-2.4.2/assets/js/amazeui.min.js"></script>

    <!-- 导入vuejs和axios -->
    <script src="./plugins/vue/dist/vue.js"></script>
    <script src="./plugins/axios/dist/axios.js"></script>
    <script src="./js/common.js"></script>
    <style type="text/css">
        .validateMsg{
            font-size: 12px;
            color: red;
        }
        #dyMobileButton:disabled {
            cursor: no-drop;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="login-boxtitle">
        <a href="home/demo.html"><img alt="" src="./images/logobig.png"/></a>
    </div>

    <div class="res-banner">
        <div class="res-main">
            <div class="login-banner-bg"><span></span><img src="./images/big.jpg"/></div>
            <div class="login-box">
                <!--
                    am-tabs  表示tabs选项卡
                        am-tabs-nav 表示选项卡中的多个选项  里面每一个li标签就是一个选项
                        am-tabs-bd 表示每个选项对应的div展示的内容区域
                            am-tab-panel 表示选项卡div内容面板区域
                -->
                <div class="am-tabs" id="doc-my-tabs">
                    <ul class="am-tabs-nav am-nav am-nav-tabs am-nav-justify">
                        <li class="am-active"><a href="">用户名密码绑定</a></li>
                        <li><a href="">手机验证码绑定</a></li>
                    </ul>
                    <div class="am-tabs-bd" style="margin-top: -20px;">
                        <!-- 用户名密码绑定 -->
                        <div class="am-tab-panel am-active">
                            <form method="post" :model="usernameBind">
                                <div class="user-email">
                                    <label for="username"><i class="am-icon-envelope-o"></i></label>
                                    <input type="text" v-model="usernameBind.username" id="username" placeholder="请输入用户名">
                                    <span class="validateMsg">{{usernameValidateMsg}}</span>
                                </div>
                                <div class="user-pass">
                                    <label for="password_email"><i class="am-icon-lock"></i></label>
                                    <input type="password" v-model="usernameBind.password" id="password_email" placeholder="设置密码">
                                    <span class="validateMsg">{{passwordValidateMsg}}</span>
                                </div>
                                <div class="user-pass">
                                    <label for="passwordRepeat_email"><i class="am-icon-lock"></i></label>
                                    <input type="password" v-model="usernameBind.confirmPassword" id="passwordRepeat_email" placeholder="确认密码">
                                    <span class="validateMsg">{{confirmPasswordValidateMsg}}</span>
                                </div>
                            </form>
                            <div class="login-links">
                                <label for="reader-me_email">
                                    <input id="reader-me_email" :checked="usernameBind.agreement" v-model="usernameBind.agreement" @click="usernameBind.agreement = !usernameBind.agreement" type="checkbox"> 点击表示您同意商城《服务协议》
                                </label>
                                <br/>
                                <span class="validateMsg">{{agreementValidateMsg}}</span>
                            </div>
                            <div class="am-cf">
                                <input type="button" @click="usernameBindSubmit" value="绑定" class="am-btn am-btn-primary am-btn-sm am-fl">
                                <br/>
                                <span class="validateMsg" style="font-size: 16px;text-align: center;display: block;">{{bindErrorMsg}}</span>
                            </div>

                        </div>

                        <!-- 手机验证码绑定 -->
                        <div class="am-tab-panel">
                            <form method="post" :model="phoneBind">
                                <div class="user-phone">
                                    <label for="phone"><i class="am-icon-mobile-phone am-icon-md"></i></label>
                                    <input type="tel" v-model="phoneBind.phone" @blur="validatePhone" id="phone" placeholder="请输入手机号">
                                    <span class="validateMsg">{{phoneValidateMsg}}</span>
                                </div>
                                <div class="verification">
                                    <label for="code"><i class="am-icon-code-fork"></i></label>
                                    <input type="tel" v-model="phoneBind.verifyCode" @blur="validateVerifyCode" id="code" placeholder="请输入验证码">
                                    <button type="button" class="btn" @click="sendMobileCode" :disabled="btnDisabled" id="dyMobileButton">{{btnText}}</button>
                                    <br/>
                                    <span class="validateMsg">{{verifyCodeValidateMsg}}</span>
                                </div>
                                <div class="user-pass">
                                    <label for="password_phone"><i class="am-icon-lock"></i></label>
                                    <input type="password" v-model="phoneBind.password" @blur="validatePassword" id="password_phone" placeholder="设置密码">
                                    <span class="validateMsg">{{passwordValidateMsg}}</span>
                                </div>
                                <div class="user-pass">
                                    <label for="passwordRepeat_phone"><i class="am-icon-lock"></i></label>
                                    <input type="password" v-model="phoneBind.confirmPassword" @blur="validateConfirmPassword" id="passwordRepeat_phone" placeholder="确认密码">
                                    <span class="validateMsg">{{confirmPasswordValidateMsg}}</span>
                                </div>
                            </form>
                            <div class="login-links" style="margin-top: -10px;">
                                <label for="reader-me_phone">
                                    <input id="reader-me_phone" :checked="phoneBind.agreement" v-model="phoneBind.agreement" @click="phoneBind.agreement = !phoneBind.agreement" type="checkbox"> 点击表示您同意商城《服务协议》
                                </label>
                                <br/>
                                <span class="validateMsg">{{agreementValidateMsg}}</span>
                            </div>
                            <div class="am-cf">
                                <input type="button" @click="submitReg" value="注册" class="am-btn am-btn-primary am-btn-sm am-fl">
                            </div>

                            <hr>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="footer ">
        <div class="footer-hd ">
            <p>
                <a href="# ">恒望科技</a>
                <b>|</b>
                <a href="# ">商城首页</a>
                <b>|</b>
                <a href="# ">支付宝</a>
                <b>|</b>
                <a href="# ">物流</a>
            </p>
        </div>
        <div class="footer-bd ">
            <p>
                <a href="# ">关于恒望</a>
                <a href="# ">合作伙伴</a>
                <a href="# ">联系我们</a>
                <a href="# ">网站地图</a>
                <em>© 2015-2025 Hengwang.com 版权所有. 更多模板 <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a>
                    - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></em>
            </p>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        $('#doc-my-tabs').tabs();  //开启选项卡的功能
    })



    new Vue({
        el:"#app",
        data(){
            return {
                usernameBind:{  //用户名密码绑定
                    id: null,
                    username:'',
                    password:'',
                    confirmPassword:'',
                    agreement:false,
                    type:'usernameBind',    //phoneBind表示手机验证码绑定 usernameBind表示用户名密码绑定
                },
                phoneBind:{//手机验证码绑定
                    id: null,
                    phone:'',
                    verifyCode:'',
                    password:'',
                    confirmPassword:'',
                    type:'phoneBind',        //phoneBind表示手机验证码绑定 usernameBind表示用户名密码绑定
                    agreement:false
                },
                phoneValidateMsg:'',     //手机号验证信息
                verifyCodeValidateMsg:'',     //验证码验证信息
                passwordValidateMsg:'',     //密码验证信息
                confirmPasswordValidateMsg:'',     //确认密码验证信息
                agreementValidateMsg:'',     //同意协议验证信息
                btnDisabled:false,       //按钮的禁用状态
                btnText:'获取',           //按钮上面的文字
                phoneValidateResult: false,       //手机验证结果
                bindErrorMsg: ''    //用户绑定结果消息
            }
        },
        methods:{
            //对手机号进行验证
            validatePhone(){
                if(!this.phoneBind.phone){
                    this.phoneValidateMsg = '手机号必填！'
                    $("#phone").css('border','1px solid red').parent().css('color',"red")
                    return false;
                }
                if(!/^1[3-9][0-9]{9}$/.test(this.phoneBind.phone)){
                    this.phoneValidateMsg = '请输入手机号！'
                    $("#phone").css('border','1px solid red').parent().css('color',"red")
                    return false;
                }
                //验证手机号唯一  phoneBind表示手机验证码注册 phoneLogin表示手机验证码登录
                this.$http.get('/lr/checkPhone/phoneBind/'+this.phoneBind.phone).then(res => {
                    if(res.data.success){
                        this.phoneValidateMsg = ''
                        $("#phone").css('border','1px solid green').parent().css('color',"green")
                        this.phoneValidateResult = true;
                    }else{
                        this.phoneValidateMsg = res.data.msg
                        this.phoneValidateResult = false
                    }
                })
                return this.phoneValidateResult;
            },
            //对验证码进行验证
            validateVerifyCode(){
                if(!this.phoneBind.verifyCode){
                    this.verifyCodeValidateMsg = '验证码必填！'
                    $("#code").css('border','1px solid red').parent().css('color',"red")
                    return false;
                }
                this.verifyCodeValidateMsg = ''
                $("#code").css('border','1px solid green').parent().css('color',"green")
                return true;
            },
            //对密码进行验证
            validatePassword(){
                if(!this.phoneBind.password){
                    this.passwordValidateMsg = '密码必填！'
                    $("#password_phone").css('border','1px solid red').parent().css('color',"red")
                    return false;
                }
                this.passwordValidateMsg = ''
                $("#password_phone").css('border','1px solid green').parent().css('color',"green")
                return true;
            },
            //对确认密码进行验证
            validateConfirmPassword(){
                if(!this.phoneBind.confirmPassword){
                    this.confirmPasswordValidateMsg = '确认密码必填！'
                    $("#passwordRepeat_phone").css('border','1px solid red').parent().css('color',"red")
                    return false;
                }
                if(this.phoneBind.confirmPassword != this.phoneBind.password){
                    this.confirmPasswordValidateMsg = '两次密码必须一致！'
                    $("#passwordRepeat_phone").css('border','1px solid red').parent().css('color',"red")
                    return false;
                }
                this.confirmPasswordValidateMsg = ''
                $("#passwordRepeat_phone").css('border','1px solid green').parent().css('color',"green")
                return true;
            },
            //对同意协议多选框进行验证
            validateAgreement(){
                if(!this.phoneBind.agreement){
                    this.agreementValidateMsg = '必须同意商城服务协议！'
                    return false;
                }
                this.agreementValidateMsg = ''
                return true;
            },
            //点击获取按钮，发送请求到后端，发送手机验证码，开始倒计时
            sendMobileCode(){
                this.btnDisabled = true
                //开始倒计时
                let time = 60;
                this.btnText = time
                //开启时间间隔（死循环）
                let intervalId = setInterval(()=>{
                    time--;
                    this.btnText = time
                    if(time <= 0){
                        clearInterval(intervalId)   //清除时间间隔（死循环）
                        this.btnText = '获取'
                        this.btnDisabled = false;
                    }
                }, 1000)

                //发送请求到后端，发送手机验证码  phoneBind表示手机验证码注册 phoneLogin表示手机验证码登录
                this.$http.get('/lr/sendMobileCode/phoneBind/'+this.phoneBind.phone).then(res => {
                    if(res.data.success){
                        this.verifyCodeValidateMsg = ''
                        $("#code").css('border','1px solid green').parent().css('color',"green")
                    }else{
                        this.verifyCodeValidateMsg = res.data.msg
                        $("#code").css('border','1px solid red').parent().css('color',"red")
                    }
                })
            },
            //提交注册表单
            submitReg(){
                //表单提交之前，要验证所有的输入框，当所有输入框验证结果都为true时，才表示当前表单验证通过
                if(this.validatePhone() & this.validateVerifyCode() &
                    this.validatePassword() & this.validateConfirmPassword() & this.validateAgreement()){
                    this.$http.put("/lr/userReg", this.phoneBind).then(res => {
                        if(res.data.success){
                            location.href = 'index.html'
                        }else{
                            alert(res.data.msg);
                        }
                    })
                }
            },
            //用户名密码绑定表单提交
            usernameBindSubmit(){
                //提交表单
                this.$http.post("/lr/wechatUserBind", this.usernameBind).then(res => {
                    let {success, msg, data} = res.data
                    if(success){
                        //将userToken和loginUser存储到localStorage中
                        localStorage.setItem("userToken", data.userToken)
                        localStorage.setItem("loginUser", data.loginUser)
                        location.href = 'index.html'
                    }else{
                        this.bindErrorMsg = msg
                    }
                })
            }

        },
        mounted(){
            //获取access_token和openid两个地址栏参数
            let access_token = getQueryStringByName("access_token");
            let openid = getQueryStringByName("openid");
            this.usernameBind.access_token = access_token
            this.usernameBind.openid = openid
        }
    })
</script>
</body>
</html>